<template>
    <h2 style="text-align: center;">添加科室信息</h2>
    <table border="1" class="table table-bordered">
        <tbody>
            <tr>
                <th>科室名称</th>
                <th>
                    <input type="text" placeholder="请输入科室名称"  v-model="Info.Dept_Name"/>
                    <span style="color: red;">*</span>
                </th>
            </tr>

            <tr>
                <th>科室图片</th>
                <th>
                    <img :src="Info.Dept_Img" style="width: 100px; height: 100px;" />
                    <input type="file"  @change="UpLoads"/>
                </th>
            </tr>

            <tr>
                <th>成立时间</th>
                <th>
                    <input type="date" v-model="Info.Dept_CreateTime"/>
                    <span style="color: red;">*</span>
                </th>
            </tr>

            <tr>
                <th colspan="2" style="text-align: center;">
                    <input type="button" value="添加科室信息" class="btn btn-success" @click="AddDept" style="margin-right: 10px;"/>
                    <a href="/ShowDept">返回列表</a>
                </th>
            </tr>
        </tbody>
    </table>
</template>


<script setup lang="ts">
    import {ref} from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';

    const router=useRouter();
    //添加响应式数据
    const Info=ref({
        Dept_Name: "",
        Dept_Img: "",
        Dept_CreateTime: ""
    })

    //图片上传
    const UpLoads=(img:any)=>{
        var file=img.target.files[0];
        var fd=new FormData();
        fd.append("File",file);
        axios.post("https://localhost:44339/api/FilesUpLoads/UpLoads",fd)
        .then(res=>{
            console.log(res.data)
            if(res.data.Comm_Code==-1)
            {
                alert(res.data.Comm_Msg);
            }
            else if(res.data.Comm_Code==-2)
            {
                alert(res.data.Comm_Msg);
            }
            else
            {
                Info.value.Dept_Img=res.data.Comm_Path
            }
        })
    }
    //添加科室
    const AddDept=()=>{
        //非空验证
        if(Info.value.Dept_Name=="")
        {
            alert('科室名称不能为空！');
            return;
        }
        if(Info.value.Dept_CreateTime=="")
        {
            alert('成立时间不能为空！');
            return;
        }
        axios.post("https://localhost:44339/api/Dept/AddDept",Info.value)
        .then(res=>{
            if(res.data==-1)
            {
                alert('科室名称已存在，请重新输入！');
                return;
            }
            else if(res.data>0)
            {
                alert('科室信息添加成功');
                router.push("/ShowDept");//跳转到显示页面
            }
            else
            {
                alert('科室信息添加失败');
            }
        })
    }
</script>